<template>
	<view class="card-item">
		<navigator :url="type==='course'?`/pages/course/detail/detail?courseId=${item.id}`:'/pages/teacher/teacher'">
					<image class="item-img" :src="type==='course'?item.cover:item.avatar" mode="widthFix"></image>
				</navigator>
		<block v-if=" type ==='course'">
			<view class="item-content">
					<text class="content-title">{{item.title}}</text>
					<view class="content-info">
						<uni-icons type="fire" size="20" color="#f00"></uni-icons>
						<text>{{item.lessonNum}}人已学习</text>
					</view>
			</view>
				<view class="item-sale">
					<text class="sale-price">￥{{item.price}}</text>
					<text class="sale-count"> &nbsp;{{item.buyCount}}人购买</text>
			   </view>
		</block>
		<block v-else>
			<view class="item-content">
				<view class="content-intro">
						{{item.intro}}
				</view>
				<view class="content-name">
						{{item.name}}
				</view>
			</view>
		</block>
	</view>
</template>

<script lang="ts">
	export default {
		name:"v-card-item",
		data() {
			return {
				
			};
		}
	}
</script>
<script lang="ts" setup>
	const props = defineProps(["item","type"])
</script>

<style lang="less" scoped>
.card-item {
	width: 335upx;
	background-color: #eee;
	margin-top:20upx;
	.item-img {
		width: 100%;
		// height: 200upx;
	}
	.item-content {
		.content-title {
			font-size:26upx;
			font-weight: bold;
		}
		.content-info {
			font-size: 24upx;
			padding: 10upx 0;
		}
	}
	.item-sale {
		.sale-price {
			font-size: 28upx;
			font-weight: bold;
			color:#f00;
		}
		.sale-count {
			font-size: 26upx;
		}
	}
	.content-intro {
				font-size: 26upx;
				white-space: pre-wrap;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.content-name {
				font-size: 26upx;
				font-weight: bold;
				color: #00cc99;
			}
}
</style>